<!--  -->
<template>
  <div class="catalogue-item-wrapper">
    <p class="catalogue-item-title hy-35J" ref="catalogueItemTitle"></p>
    <div class="catalogue-item-value digital" ref="catalogueItemValue">
      {{ num }}<span class="unit">{{ params.unit }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      num: 0
    }
  },
  props: ['params'],
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    init() {
      let _this = this
      let tl = new TimelineMax({})
      let catalogueItemTitleW = TweenMax.to(this.$refs.catalogueItemTitle, 0.3, {
        opacity: 1,
        scale: 1
      })
      let catalogueItemTitle = () => {
        TweenMax.to(this.$refs.catalogueItemTitle, 0.5, {
          scrambleText: {
            text: this.params.title,
            chars: '_ ',
            speed: 0.3
          }
        })
      }
      let catalogueItemValue = TweenMax.to(this.$refs.catalogueItemValue, 0.3, {
        opacity: 1,
        scale: 1
      })
      let value = TweenMax.to(this, 0.8, {
        num: () => _this.params.value,
        roundProps: ['num']
      })

      tl.addLabel('start')
        .add(catalogueItemTitleW, 'start+=0')
        .add(catalogueItemTitle, 'start+=0.2')
        .add(catalogueItemValue, 'start+=0.3')
        .add(value, 'start+=0.2')
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.catalogue-item-wrapper {
  width: 100%;
  height: 100%;
}
.catalogue-item-title {
  width: 136px;
  height: 24px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 247, 250, 0.6);
  line-height: 24px;
  background: url('../../../assets/imgs/center/center-title-bg.png') no-repeat;
  opacity: 0;
  transform: scale(0);
}
.catalogue-item-value {
  position: absolute;
  width: 100%;
  height: 24px;
  left: 0;
  top: 34px;
  background: linear-gradient(
    to right,
    rgba(3, 94, 240, 0.16) 0,
    rgba(3, 94, 240, 0) 45%,
    rgba(3, 94, 240, 0) 55%,
    rgba(3, 94, 240, 0.16) 100%
  );
  font-size: 30px;
  color: #fff;
  line-height: 24px;
  text-align: center;
  text-shadow: 5px 0 10px rgba(0, 247, 250, 0.4),
    -5px 0 10px rgba(0, 247, 250, 0.4), 0 5px 10px rgba(0, 247, 250, 0.4),
    0 -5px 10px rgba(0, 247, 250, 0.4);
  opacity: 0;
  transform: scale(0);
}
.unit {
  font-size: 18px;
}
</style>
